<template>
  <div class="auth-page">
    <div class="auth-container">
      <!-- 左侧品牌区域 -->
      <div class="brand-section">
        <div class="brand-content">
          <div class="brand-logo">
            <!-- <img src="/quora-logo.svg" alt="quora" class="logo-img"> -->
            <h1 class="brand-title">quora</h1>
          </div>
          <p class="brand-slogan">发现更大的世界</p>
          <div class="brand-features">
            <div class="feature-item">
              <el-icon><Star /></el-icon>
              <span>加入千万用户的知识社区</span>
            </div>
            <div class="feature-item">
              <el-icon><ChatDotRound /></el-icon>
              <span>与各领域专家交流互动</span>
            </div>
            <div class="feature-item">
              <el-icon><TrophyBase /></el-icon>
              <span>分享见解，获得认可</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧注册表单 -->
      <div class="form-section">
        <div class="form-container">
          <div class="form-header">
            <h2 class="form-title">注册quora</h2>
            <p class="form-subtitle">开启你的知识分享之旅</p>
          </div>

          <el-form 
            ref="registerFormRef"
            :model="registerForm"
            :rules="registerRules"
            class="register-form"
            @submit.prevent="handleRegister"
          >
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input
                v-model="registerForm.username"
                placeholder="请输入用户名"
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 邮箱 -->
            <el-form-item prop="email">
              <el-input
                v-model="registerForm.email"
                type="email"
                placeholder="请输入邮箱地址"
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <el-icon><Message /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 手机号 -->
            <el-form-item prop="phone">
              <el-input
                v-model="registerForm.phone"
                placeholder="请输入手机号（可选）"
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <el-icon><Phone /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                v-model="registerForm.password"
                type="password"
                placeholder="请输入密码"
                size="large"
                class="form-input"
                show-password
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 确认密码 -->
            <el-form-item prop="confirmPassword">
              <el-input
                v-model="registerForm.confirmPassword"
                type="password"
                placeholder="请确认密码"
                size="large"
                class="form-input"
                show-password
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 昵称 -->
            <el-form-item prop="nickname">
              <el-input
                v-model="registerForm.nickname"
                placeholder="请输入昵称（可选）"
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <el-icon><Avatar /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 服务条款 -->
            <div class="terms-agreement">
              <el-checkbox v-model="registerForm.agreeTerms" size="small">
                我已阅读并同意
                <el-button type="text" class="terms-link">《quora服务协议》</el-button>
                和
                <el-button type="text" class="terms-link">《隐私政策》</el-button>
              </el-checkbox>
            </div>

            <!-- 注册按钮 -->
            <el-form-item>
              <el-button
                type="primary"
                size="large"
                class="register-btn"
                :loading="loading"
                @click="handleRegister"
              >
                {{ loading ? '注册中...' : '注册' }}
              </el-button>
            </el-form-item>
          </el-form>

          <!-- 登录链接 -->
          <div class="form-footer">
            <span>已有账号？</span>
            <router-link to="/login" class="login-link">
              立即登录
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage} from 'element-plus'
import {useUserStore} from '@/stores/user'

const router = useRouter()
const userStore = useUserStore()

// 表单引用
const registerFormRef = ref()

// 加载状态
const loading = ref(false)

// 移除验证码相关代码

// 注册表单数据
const registerForm = reactive({
  username: '',
  email: '',
  phone: '',
  password: '',
  confirmPassword: '',
  nickname: '',
  agreeTerms: false
})

// 自定义验证器
const validateUsername = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入用户名'))
  } else if (value.length < 3) {
    callback(new Error('用户名至少3个字符'))
  } else if (value.length > 20) {
    callback(new Error('用户名不能超过20个字符'))
  } else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
    callback(new Error('用户名只能包含字母、数字和下划线'))
  } else {
    callback()
  }
}

const validateEmail = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入邮箱地址'))
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    callback(new Error('请输入正确的邮箱格式'))
  } else {
    callback()
  }
}

const validatePhone = (rule, value, callback) => {
  // 手机号为可选字段
  if (value && !/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error('请输入正确的手机号格式'))
  } else {
    callback()
  }
}

const validatePassword = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入密码'))
  } else if (value.length < 6) {
    callback(new Error('密码至少6个字符'))
  } else if (value.length > 20) {
    callback(new Error('密码不能超过20个字符'))
  } else {
    callback()
  }
}

const validateConfirmPassword = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请确认密码'))
  } else if (value !== registerForm.password) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

// 移除验证码验证器

const validateNickname = (rule, value, callback) => {
  if (value && value.length > 50) {
    callback(new Error('昵称不能超过50个字符'))
  } else {
    callback()
  }
}

const validateTerms = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请同意服务协议和隐私政策'))
  } else {
    callback()
  }
}

// 表单验证规则
const registerRules = {
  username: [{ validator: validateUsername, trigger: 'blur' }],
  email: [{ validator: validateEmail, trigger: 'blur' }],
  phone: [{ validator: validatePhone, trigger: 'blur' }],
  password: [{ validator: validatePassword, trigger: 'blur' }],
  confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }],
  nickname: [{ validator: validateNickname, trigger: 'blur' }],
  agreeTerms: [{ validator: validateTerms, trigger: 'change' }]
}

// 移除验证码发送功能

// 处理注册
const handleRegister = async () => {
  try {
    // 表单验证
    const valid = await registerFormRef.value.validate()
    if (!valid) return

    loading.value = true

    // 调用注册接口
    const result = await userStore.registerAction({
      username: registerForm.username,
      email: registerForm.email,
      phone: registerForm.phone,
      password: registerForm.password,
      confirmPassword: registerForm.confirmPassword,
      nickname: registerForm.nickname
    })

    if (result.success) {
      ElMessage.success('注册成功，请登录')
      router.push('/login')
    } else {
      ElMessage.error(result.message || '注册失败')
    }
  } catch (error) {
    console.error('注册失败:', error)
    ElMessage.error('注册失败，请稍后重试')
  } finally {
    loading.value = false
  }
}
</script>

<style lang="scss" scoped>
.auth-page {
  min-height: 100vh;
  background: url('/login_bg.webp') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.auth-container {
  display: flex;
  width: 100%;
  max-width: 1000px;
  min-height: 700px;
  background: $background-color;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.brand-section {
  flex: 1;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
}

.brand-content {
  text-align: center;
  max-width: 400px;
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}

.logo-img {
  width: 48px;
  height: 48px;
  filter: brightness(0) invert(1);
}

.brand-title {
  font-size: 32px;
  font-weight: 600;
  margin: 0;
}

.brand-slogan {
  font-size: 18px;
  margin: 0 0 40px 0;
  opacity: 0.9;
}

.brand-features {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  opacity: 0.9;

  .el-icon {
    font-size: 20px;
  }
}

.form-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 40px;
  overflow-y: auto;
}

.form-container {
  width: 100%;
  max-width: 400px;
}

.form-header {
  text-align: center;
  margin-bottom: 32px;
}

.form-title {
  font-size: 28px;
  font-weight: 600;
  color: $text-color;
  margin: 0 0 8px 0;
}

.form-subtitle {
  font-size: 14px;
  color: $text-secondary;
  margin: 0;
}

.register-form {
  margin-bottom: 24px;
}

.form-input {
  :deep(.el-input__wrapper) {
    border-radius: 8px;
    padding: 0 16px;
    height: 48px;
  }
}

.captcha-item {
  .captcha-input {
    display: flex;
    gap: 12px;
    
    .form-input {
      flex: 1;
    }
    
    .captcha-btn {
      width: 120px;
      border-radius: 8px;
      font-size: 14px;
      
      &:disabled {
        background: $background-light;
        border-color: $border-color;
        color: $text-secondary;
      }
    }
  }
}

.terms-agreement {
  margin-bottom: 24px;
  font-size: 13px;
  color: $text-secondary;
  line-height: 1.5;
  
  .terms-link {
    color: $primary-color;
    font-size: 13px;
    padding: 0;
    height: auto;
    
    &:hover {
      color: $primary-hover;
    }
  }
}

.register-btn {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
}

.social-register {
  margin-bottom: 24px;
}

.divider {
  position: relative;
  text-align: center;
  margin: 24px 0;
  
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: $border-color;
  }
  
  span {
    background: $background-color;
    padding: 0 16px;
    font-size: 12px;
    color: $text-secondary;
  }
}

.social-buttons {
  display: flex;
  gap: 12px;
}

.social-btn {
  flex: 1;
  height: 40px;
  border-radius: 6px;
  font-size: 14px;
  
  &.wechat {
    background: #07c160;
    border-color: #07c160;
    color: white;
    
    &:hover {
      background: #06ad56;
      border-color: #06ad56;
    }
  }
  
  &.qq {
    background: #12b7f5;
    border-color: #12b7f5;
    color: white;
    
    &:hover {
      background: #0fa5e0;
      border-color: #0fa5e0;
    }
  }
  
  &.weibo {
    background: #e6162d;
    border-color: #e6162d;
    color: white;
    
    &:hover {
      background: #d01428;
      border-color: #d01428;
    }
  }
}

.form-footer {
  text-align: center;
  font-size: 14px;
  color: $text-secondary;
}

.login-link {
  color: $primary-color;
  text-decoration: none;
  margin-left: 4px;
  
  &:hover {
    color: $primary-hover;
  }
}

@media (max-width: 768px) {
  .auth-container {
    flex-direction: column;
    max-width: 400px;
    min-height: auto;
  }
  
  .brand-section {
    padding: 40px 20px;
  }
  
  .brand-title {
    font-size: 24px;
  }
  
  .brand-slogan {
    font-size: 16px;
  }
  
  .form-section {
    padding: 40px 20px;
  }
  
  .form-title {
    font-size: 24px;
  }
  
  .captcha-item {
    .captcha-input {
      flex-direction: column;
      gap: 8px;
      
      .captcha-btn {
        width: 100%;
      }
    }
  }
}
</style>
